import React from 'react'
import { Input } from 'antd'
import Form from 'antd/lib/form'
import { IProject } from './list'
import { UserSelect } from 'components/user-select'

export interface IUser {
  name: string
  id: number
  token: string
}
interface ISearchPanel {
  users: IUser[]
  param: Partial<Pick<IProject, 'name' | 'personId'>>
  setParam: (param: ISearchPanel['param']) => void
}

export const SearchPanel = ({ users, param, setParam }: ISearchPanel) => {
  return (
    <Form style={{ margin: '2rem 0' }} layout={'inline'}>
      <Form.Item>
        {/* 输入框 */}
        <Input
          placeholder="请输入用户名"
          type="text"
          value={param.name}
          onChange={event =>
            setParam({
              ...param,
              name: event.target.value
            })
          }
        />
      </Form.Item>
      <Form.Item>
        <UserSelect
          defaultOptionName="负责人"
          value={param.personId}
          onChange={value => {
            console.log(value)
            setParam({ ...param, personId: value })
          }}
        />
      </Form.Item>
    </Form>
  )
}
